import EnvAdd from '@/pages/Devops/Env/envAdd';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { history } from '@umijs/max';
import { Badge, Button, Descriptions, Tag, Typography } from 'antd';
import React from 'react';

const { Text, Link } = Typography;

const Envs: React.FC = () => {
  const [addEnvModal, setAddEnvModal] = React.useState(false);

  return (
    <PageContainer
      title={false}
      style={{ height: '100vh' }}
      extra={
        <Button
          type={'primary'}
          onClick={() => {
            setAddEnvModal(true);
          }}
        >
          添加环境
        </Button>
      }
    >
      <ProCard gutter={[16, 10]} ghost={true} wrap>
        <ProCard
          colSpan={{
            xs: 24,
            sm: 12,
            md: 12,
            lg: 8,
            xl: 8,
            xxl: 6,
          }}
          title={
            <>
              <Typography.Title level={4} style={{ margin: 0 }}>
                测试环境
              </Typography.Title>
              <Typography.Text type={'secondary'}>
                无尘 - 创建于 2025-04-02 16:19：22
              </Typography.Text>
            </>
          }
          extra={
            <Button type={'link'} onClick={() => history.push('./envs/dev')}>
              查看
            </Button>
          }
          headStyle={{ backgroundColor: '#E9EBEDFF' }}
          headerBordered={true}
        >
          <Descriptions
            items={[
              {
                key: '1',
                label: '环境标签',
                children: (
                  <Tag bordered={false} style={{ backgroundColor: '#E9EBEDFF' }}>
                    测试环境
                  </Tag>
                ),
              },
              {
                key: '2',
                label: '环境状态',
                children: '未部署',
              },
              {
                key: '3',
                label: '当前版本',
                children: '202504032212054-3xsw3',
              },
            ]}
            column={1}
            contentStyle={{ justifyContent: 'flex-end' }}
          />
          <div style={{ marginTop: 10 }}>
            <Button block>立即部署</Button>
          </div>
        </ProCard>

        <ProCard
          colSpan={{
            xs: 24,
            sm: 12,
            md: 12,
            lg: 8,
            xl: 8,
            xxl: 6,
          }}
          title={
            <>
              <Typography.Title level={4} style={{ margin: 0 }}>
                预发环境
              </Typography.Title>
              <Typography.Text type={'secondary'}>
                无尘 - 创建于 2025-04-02 16:19：22
              </Typography.Text>
            </>
          }
          headStyle={{ backgroundColor: '#E9EBEDFF' }}
          headerBordered={true}
        >
          <Descriptions
            items={[
              {
                key: '1',
                label: '环境标签',
                children: (
                  <Tag bordered={false} style={{ backgroundColor: '#E9EBEDFF' }}>
                    预发环境
                  </Tag>
                ),
              },
              {
                key: '2',
                label: '环境状态',
                children: <Badge status="success" text={'运行中'} />,
              },
              {
                key: '3',
                label: '当前版本',
                children: '202504032212054-3xsw3',
              },
            ]}
            column={1}
            contentStyle={{ justifyContent: 'flex-end' }}
          />
          <div style={{ marginTop: 10 }}>
            <Button block>立即部署</Button>
          </div>
        </ProCard>

        <ProCard
          colSpan={{
            xs: 24,
            sm: 12,
            md: 12,
            lg: 8,
            xl: 8,
            xxl: 6,
          }}
          title={
            <>
              <Typography.Title level={4} style={{ margin: 0 }}>
                生产环境
              </Typography.Title>
              <Typography.Text type={'secondary'}>
                无尘 - 创建于 2025-04-02 16:19：22
              </Typography.Text>
            </>
          }
          headStyle={{ backgroundColor: '#E9EBEDFF' }}
          headerBordered={true}
        >
          <Descriptions
            items={[
              {
                key: '1',
                label: '环境标签',
                children: (
                  <Tag bordered={false} style={{ backgroundColor: '#E9EBEDFF' }}>
                    生产环境
                  </Tag>
                ),
              },
              {
                key: '2',
                label: '环境状态',
                children: '未部署',
              },
              {
                key: '3',
                label: '当前版本',
                children: '202504032212054-3xsw3',
              },
            ]}
            column={1}
            contentStyle={{ justifyContent: 'flex-end' }}
          />
          <div style={{ marginTop: 10 }}>
            <Button block>立即部署</Button>
          </div>
        </ProCard>

        <ProCard
          colSpan={{
            xs: 24,
            sm: 12,
            md: 12,
            lg: 8,
            xl: 8,
            xxl: 6,
          }}
          title={
            <>
              <Typography.Title level={4} style={{ margin: 0 }}>
                灰度环境
              </Typography.Title>
              <Typography.Text type={'secondary'}>
                无尘 - 创建于 2025-04-02 16:19：22
              </Typography.Text>
            </>
          }
          headStyle={{ backgroundColor: '#E9EBEDFF' }}
          headerBordered={true}
        >
          <Descriptions
            items={[
              {
                key: '1',
                label: '环境标签',
                children: (
                  <Tag bordered={false} style={{ backgroundColor: '#E9EBEDFF' }}>
                    生产环境
                  </Tag>
                ),
              },
              {
                key: '2',
                label: '环境状态',
                children: <Badge status="error" text={'异常'} />,
              },
              {
                key: '3',
                label: '当前版本',
                children: '202504032212054-3xsw3',
              },
            ]}
            column={1}
            contentStyle={{ justifyContent: 'flex-end' }}
          />
          <div style={{ marginTop: 10 }}>
            <Button block>立即部署</Button>
          </div>
        </ProCard>
        <ProCard
          colSpan={{
            xs: 24,
            sm: 12,
            md: 12,
            lg: 8,
            xl: 8,
            xxl: 6,
          }}
          title={
            <>
              <Typography.Title level={4} style={{ margin: 0 }}>
                测试环境-乾坤生图
              </Typography.Title>
              <Typography.Text type={'secondary'}>
                无尘 - 创建于 2025-04-02 16:19：22
              </Typography.Text>
            </>
          }
          headStyle={{ backgroundColor: '#E9EBEDFF' }}
          headerBordered={true}
        >
          <Descriptions
            items={[
              {
                key: '1',
                label: '环境标签',
                children: (
                  <Tag bordered={false} style={{ backgroundColor: '#E9EBEDFF' }}>
                    测试环境
                  </Tag>
                ),
              },
              {
                key: '2',
                label: '环境状态',
                children: '未部署',
              },
              {
                key: '3',
                label: '当前版本',
                children: '202504032212054-3xsw3',
              },
            ]}
            column={1}
            contentStyle={{ justifyContent: 'flex-end' }}
          />
          <div style={{ marginTop: 10 }}>
            <Button block>立即部署</Button>
          </div>
        </ProCard>
      </ProCard>

      <EnvAdd onOpenChange={setAddEnvModal} Open={addEnvModal} />
    </PageContainer>
  );
};

export default Envs;
